<template>
  <el-select
      v-model="selectId" :placeholder="placeholder" default-first-option filterable multiple
      reserve-keyword
  >
    <el-option v-for="item in options" :key="item.id" :label="item.id+','+item.name" :value="item.id"/>
  </el-select>
</template>
<script>
import {list} from "@/api/system/role";

export default {
  name: "RoleIdMultipleSelect",

  props: {
    value: {type: Array, default: null},
    placeholder: {type: String, default: ''}
  },

  data() {
    return {
      selectId: null,
      options: [],
    }
  },

  watch: {
    'value': {
      handler(val) {
        this.selectId = val
      }, immediate: true
    },

    'selectId': {
      handler(val) {
        this.$emit('input', val)
      }, immediate: false
    }
  },

  mounted() {
    this.list()
  },

  methods: {
    list() {
      list({}).then(res => {
        this.options = res.data
      })
    },
  }
}
</script>

<style scoped>

</style>
